<template>
    <div class="container yuan-container category">

        <a-card title="商品分类">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>分类名称：</span>
                    <a-input-search allowClear v-model="pageParams.keywords" placeholder="分类名称" @search="resetList" />
                </div>

                <a-button style="float:right" type="primary" class="filter-list" @click="add"
                    v-if="$checkPer(['classifyAdd'])">新增分类</a-button>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickNext(record)">查看下级</a-button>
                            <a-button type="warning" @click="clickEdit(record)" v-if="$checkPer(['classifyEdit'])">修改</a-button>
                            <template v-if="$checkPer(['classifyDelete'])">
                                <a-popconfirm okText="确定" cancelText="取消" title="是否关闭该分类" @confirm="clickClose(record)"
                                    v-if="record.status===1">
                                    <a-button type="danger">关闭</a-button>
                                </a-popconfirm>
                                <a-popconfirm okText="确定" cancelText="取消" title="是否开启该分类" @confirm="clickOpen(record)" v-else>
                                    <a-button type="success">开启</a-button>
                                </a-popconfirm>
                            </template>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" :isShow="isShow"
            @resetList="resetList" />
    </div>
</template>
<script lang="ts">
import shopMallApi from "@/api/shopMallApi";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "../category/categoryDetail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        keywords: "",
    };
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "分类名称",
        },
        {
            align: "center",
            dataIndex: "level",
            key: "level",
            title: "级别",
        },
        {
            align: "center",
            dataIndex: "status",
            key: "status",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "已关闭", class: "status-words c-danger" },
                    1: { title: "已开启", class: "status-words c-success" },
                };
                const dataOne = data[record.status] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "sort",
            key: "sort",
            title: "排序",
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await shopMallApi.getClassifyList({
                name: this.pageParams.keywords,
                level: "一级",
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    isShow = false;
    detailVisible = false;
    add() {
        this.editInfo = {};
        this.isShow = false;
        this.detailVisible = true;
    }
    editInfo = {};
    clickEdit(item) {
        this.isShow = false;
        this.editInfo = item;
        this.detailVisible = true;
    }

    async clickDelete(item) {
        this.loading = true;
        try {
            // await api.deleteResourceAbutment(item.id);
            // this.$message.success("删除成功");
            // this.getList();
        } finally {
            this.loading = false;
        }
    }

    clickNext(item) {
        window.open("/#/shopMall/categoryNext?parentId=" + item.id);
    }
    async clickClose(item) {
        this.loading = true;
        try {
            await shopMallApi.uploadClassify({ ...item, status: 0 });
            this.$message.success("关闭成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickOpen(item) {
        this.loading = true;
        try {
            await shopMallApi.uploadClassify({ ...item, status: 1 });
            this.$message.success("开启成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.category {
}
</style>
